import { Router, Route, Switch } from "react-router-dom";
import { customHistory } from "./utils";
import "./App.scss";
import { lazy, Suspense } from 'react'
import { Spin } from 'antd'

// 页面组件
// import Login from "./pages/Login";
// import Layout from "./pages/Layout";
import AuthRoute from '@/components/AuthRoute'

// 路由懒加载
const Login = lazy(()=>import('./pages/Login'))
const Layout = lazy(()=>import('./pages/Layout'))


// BrowserRouter组件已经实现了路由模式
// Router 没有实现路由模式的组件，history属性传入路由模式
const App = () => {
  return (
    <Router history={customHistory}>
      <Suspense fallback={<div className="loading"><Spin /></div>}>
        <div className="app">
          <Switch>
            {/* 注意：先写login规则 */}
            <Route path="/login" component={Login}></Route>
            <AuthRoute path="/" component={Layout}></AuthRoute>
          </Switch>
        </div>
      </Suspense>
    </Router>
  );
};

export default App;
